@extends('Layout/base')

@section('header-js')
<link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/member.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/home.css') }}">

<script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/js-tab.js') }}"></script>


    <!-- 引入地址三级联动的组件 -->
    <link href="{{ asset('js/h-ui-jquery.min.js') }}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="{{ asset('js/jquery.provincesCity.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/provincesData.js') }}"></script>
    <!-- 引入地址三级联动的组件结束 -->


    <script type="text/javascript">

    {{-- 地址三级联动方法开始 --}}
    $(function(){
        $("#province").ProvinceCity();
    });
    {{-- 地址三级联动方法结束 --}}

         (function(a){
             a.fn.hoverClass=function(b){
                 var a=this;
                 a.each(function(c){
                     a.eq(c).hover(function(){
                         $(this).addClass(b)
                     },function(){
                         $(this).removeClass(b)
                     })
                 });
                 return a
             };
         })(jQuery);

         $(function(){
             $("#pc-nav").hoverClass("current");
         });



         {{-- 编辑地址的弹框 --}}
         function address_edit(obj, id) {
             //分别拿到原有收件信息的各个值
             var oldgetname = $(obj).parent().parent().prev().children().last().children().first().text();
             var oldphone = $(obj).parent().parent().prev().children().last().children().first().next().text();
             var oldaddress = $(obj).parent().parent().prev().children().last().children().first().next().next().text();
             var oldaddressdetail = $(obj).parent().parent().prev().children().last().children().last().text();

             //显示编辑框
             $(".hint").css({"display":"block"});
             $(".box").css({"display":"block"});
             // 把原收件信息显示在编辑的各个框内
             $('#getname').val(oldgetname);
             $('#addressdetail').val(oldaddressdetail);
             $('#phone').val(oldphone);

             //JS判断输入数据是否合法
             $('#getname').blur(function() {
                 // 判断之前，先把之前提示的信息清空
                 $('.getname').text('');
                 //列出正则
                 var reg = /\s/;
                 //获取输入框信息
                 var vals = this.value;
                 //JS判断

                 if (reg.test(vals) || vals == '' ) {
                     $('.getname').text('*收件人不能为空');
                 }
             });

             //在处理详细地址的鼠标离开事件之前，先处理详细地址的获取鼠标事件，用于处理数据选择省份城市和区域等数据是否为空
             $('#addressdetail').focus(function() {
                 $('.addressbody').text('');
                 var procince = $('#province select').val();
                 var city = $('#province select').next().val();
                 var area = $('#province select').next().next().val();
                 if (province == '请选择' || city == '请选择' || area == '请选择') {
                     $('.addressbody').text('*省~市~区~皆不能为空');
                 }
             });

             $('#addressdetail').blur(function() {
                 $('.addressdetail').text('');
                 var reglength = /^[\u4E00-\u9FA5A-Za-z0-9]{5,50}$/;
                 var vals = this.value;
                 if (!reglength.test(vals)) {
                     $('.addressdetail').text('*详细地址请输入5到50个字符之间');
                 }
             });

             $('#phone').blur(function() {
                 $('.phone').text('');
                 var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                 var vals = this.value;
                 //JS处理输入内容不能为空
                 if (!reg.test(vals) || vals == '' ) {
                     $('.phone').text('*手机号码不正确');
                 }
             });


             $(".hint-in3").click(function(event) {
                 // 获取各元素的值并列出正则
                 var getname_reg = /^[\u4E00-\u9FA5A-Za-z0-9_]{1,15}$/;
                 var addressdetail_reg = /^[\u4E00-\u9FA5A-Za-z0-9]{5,50}$/;
                 var phone_reg = /^1[34578]\d{9}$/;
                 var getname = $('#getname').val();
                 var province = $('#province select').val();
                 var city = $('#province select').next().val();
                 var area = $('#province select').next().next().val();
                 var addressdetail = $('#addressdetail').val();
                 var phone = $('#phone').val();
                 // console.log(getname, province, city, area, addressdetail, phone);


                 if (!getname_reg.test(getname) || !addressdetail_reg.test(addressdetail)
                 || !phone_reg.test(phone) || province == '请选择' || city == '请选择'
                 || area == '请选择') {

                     $('.address').text('*请检查您的输入是否正确');
                     $(".hint").css({"display":"block"});
                     $(".box").css({"display":"block"});
                 } else {

                     $.ajax({
                         dataType: 'json',
                         type: 'post',
                         data: "_token={{ csrf_token() }}&getname=" + getname +
                          '&province=' + province + '&city=' + city + '&area=' +
                           area + '&addressdetail=' + addressdetail + '&phone='
                           + phone + '&id=' + id,
                         url: '{{ route("editaddress") }}',
                         success: function(data) {
                             //更改成功，把数据都换成最新的
                             if (data.status == 200) {
                                 $(obj).parent().parent().prev().children().last().children().first().text(data.getname);
                                 $(obj).parent().parent().prev().children().last().children().first().next().text(data.phone);
                                 $(obj).parent().parent().prev().children().last().children().first().next().next().text(data.ssq);
                                 $(obj).parent().parent().prev().children().last().children().last().text(data.address);

                                 $(".hint").css({"display":"none"});
                                 $(".box").css({"display":"none"});
                             } else {
                                 alert(data.msg);
                                 $(".hint").css({"display":"block"});
                                 $(".box").css({"display":"block"});
                             }



                         },


                     });

                 }

             });


             $(".hint3").click(function(event) {
                 $(this).parent().parent().css({"display":"none"});
                 $(".box").css({"display":"none"});
             });

             $("#H-table li").each(function(i){
                 $(this).click((function(k){
                     var _index = k;
                     return function(){
                         $(this).addClass("cur").siblings().removeClass("cur");
                         $(".H-over").hide();
                         $(".H-over:eq(" + _index + ")").show();
                     }
                 })(i));
             });
         };

         {{-- 设为默认地址 --}}
         function status(obj, id) {

             $.ajax({
                 dataType: 'json',
                 type: 'get',
                 url: "{{ route('defaultaddress') }}",
                 data: 'id=' + id,
                 success: function(data) {
                     if (data.status == 200) {
                         //找到对应的节点，对样式做出改变
                         $(obj).hide();
                         $(obj).parent().parent().parent().parent().parent().siblings().children().children().children('.fr').children().children('.ddff').show();
                         $(obj).parent().parent().parent().parent().parent().children().children().children('.fl').children('.aa').text('默认地址').css('border', 'solid red 1px');
                         $(obj).parent().parent().parent().parent().parent().siblings().children().children().children('.fl').children('.aa').text('').css('border', 'none');
                     } else {
                         alert(data.msg);
                     }
                 }
             });
         }


         {{-- 地址的删除 --}}
         function del(obj, id) {
             $.ajax({
                 dataType: 'json',
                 type: 'post',
                 url: "{{ route('deleteaddress') }}",
                 data: '_token={{ csrf_token() }}&id=' + id,
                 success: function(data) {
                     if (data.status == 403) {
                         alert(data.msg);
                     }
                     if (data.status == 404) {
                         alert(data.msg);
                     }

                     if (data.status == 200) {
                         alert(data.msg);
                         $(obj).parent().parent().parent().parent().remove();
                     }
                 }

             });


         }

     </script>


 </head>
@endsection


{{--编辑地址的小窗口--}}
<div class="box">
    <div class="hint">

            <div class="hint-in1">
                <div class="hint2">编辑收货地址</div>
                <div class="hint3"></div>
            </div>


            <div class="pc-label"><label><i class="reds "></i>收货人:</label>
                <p class="getname" style="color:red"></p>
                <input style="height:25px;width:200px" type="text" id="getname" placeholder="请您填写收货人姓名">
            </div>
            <div id="sjld" style="margin-top:10px; padding-left:40px; position:relative;" class="clearfix">

                <div class="clearfix" style="padding-bottom:5px;"><i class="reds fl"></i>
                    <p class="fl" style="padding-right:0px">所在地区<b>(※请务必确认*省*市*区※)</b>:</p>
                    <p class="addressbody" style="color:red;"></p>
                </div>


                <div id="province" style="float:left"></div>


            </div>

            <div class="pc-label"><label><i class="reds "></i>详细地址:</label>
                <p class="addressdetail" style="color:red"></p>
                <input style="height:25px;width:500px" id="addressdetail" type="text" style="width:400px; " placeholder="请您填写收货人详细地址">
            </div>
            <div class="pc-label"><label><i class="reds "></i>手机号码:</label>
                <p class="phone" style="color:red"></p>
                <input style="height:25px;width:200px" id="phone" type="text" style="width:400px;"placeholder="请您填写收货人手机号码">
            </div>
            <p class="address" style="color:red" style="float:left">　</p>
            <button href="javascript:;" class="hint-in3" id="address">保存收货地址</button>

    </div>

</div>



<!--- header begin-->
@section('content')
<header id="pc-header">

    <div class="container clearfix">

        <div class="pc-order-titlei fl"><h2>填写订单</h2></div>
        <div class="pc-step-title fl">
            <ul>
                <li class="cur2"><a href="#">1 . 我的购物车</a></li>
                <li class="cur"><a href="#">2 . 填写核对订单</a></li>
                <li><a href="#">3 . 成功提交订单</a></li>
            </ul>
        </div>
    </div>

</header>

<header id="pc-header">
    <div class="container clearfix" style="text-align:center">
        @if (session('message'))
        <div style="text-align:center; border:1px solid red; height:50px; line-height:50px; background:#EA494A; color:white; font-size:30px; border-radius:5px">
            <i class="Hui-iconfont"></i>{{ session('message') }}
        </div>
        @endif
    </div>
</header>

<!-- header End -->


<!-- 订单提交成功 begin-->
<section>
    <div class="containers">
       <div class="pc-space">
           <div class="pc-order-title clearfix"><h3 class="fl">收货人信息</h3> <a href="#" class="fr pc-order-add btn1">新增收货地址</a> </div>
           @if (empty($getMsg))
           <div class="pc-border">
               <div class="pc-order-text clearfix">
                   <ul class=" clearfix">
                       <li class="clearfix fl">
                           <div class="fl pc-frame pc-frams"> <h2>暂无地址</h2></div>
                           <div class="fl pc-address">
                               <span class="oldgetname">请添加收货人信息</span>
                           </div>
                       </li>
                   </ul>
               </div>
           </div>
           @else
           @foreach ($getMsg as $userAddress)
           <div class="pc-border">
               <div class="pc-order-text clearfix">
                   <ul class=" clearfix">
                       <li class="clearfix fl">
                           @if ($userAddress['whether_address'] == 1)
                           <div class="fl pc-frame pc-frams aa">默认地址</div>
                           @else
                           <div class="fl pc-frame pc-frams aa" style="border:none"></div>
                           @endif
                           <div class="fl pc-address">
                               <span class="oldgetname">{{ $userAddress['getname'] }}</span>
                               <span>{{ $userAddress['phone'] }}</span>
                               <span>{{ $userAddress['ssq'] }}</span>
                               <span>{{ $userAddress['address'] }}</span>
                           </div>
                       </li>
                       <li class="fr">
                           <div class="pc-click">
                               @if ($userAddress['whether_address'] != 1)
                               <a href="#" onclick="status(this, {{ $userAddress['id'] }})" class="ddff">设为默认地址</a>
                               @else
                               <a href="#" onclick="status(this, {{ $userAddress['id'] }})" style="display:none" class="ddff">设为默认地址</a>
                               @endif
                               <a href="#" class="btn2" onclick="address_edit(this, {{ $userAddress['id'] }})">编辑</a>
                               <a href="javascript:;" onclick="del(this, {{ $userAddress['id'] }})">删除</a>
                           </div>
                       </li>
                   </ul>
               </div>
           </div>
           @endforeach
           @endif
       </div>
       <div class="pc-space">
            <div class="pc-order-title clearfix"><h3 class="fl">支付方式</h3></div>


            <div class="pc-border">
                <div class="pc-order-text clearfix">
                    <ul class=" clearfix">
                        <li class="clearfix fl">
                            <div class="fl pc-frame pc-frams"> <a href="#"> 在线支付</a></div>
                        </li>
                    </ul>
                </div>
            </div>



        </div>
       <div class="pc-space clearfix">
           <div class="fl ">
               <div class="pc-order-title clearfix"><h3 class="fl">收货人信息</h3></div>
               <div class="fr pc-border">
                   <div class="pc-order-text pc-order-l clearfix">
                       <ul id="H-table" class="clearfix H-table"  >
                           <li class="cur" style="width:415px">
                               <a href="javascript:void(0);">百事汇通</a>
                           </li>

                       </ul>
                       <div class="" style="height:211px"></div>
                       <div class="pc-line"></div>
                       <div class="pc-freight"><p>运费：  {{ $payment }}元</p></div>
                   </div>
               </div>
           </div>
           <div class="fr ">
               <div class="pc-order-title clearfix"><h3 class="fl">商品信息</h3></div>
               <div class="pc-border">
                   <div class="pc-order-text clearfix" style="height:278px;width:660px; overflow:auto">
                       <div class="pc-wares-t"><h4>{{-- 放商家信息 --}}</h4></div>


                       @if (empty($attrs_goodsinfo))
                       <div class="clearfix pc-wares-p">
                           <h2>订单没商品你是咋进来的(#‵′)凸</h2>
                       </div>
                       @else
                       <div class="clearfix pc-wares-p">
                           <div class="fl pc-wares"><a href="{{ $attrs_goodsinfo['id'] }}"><img width=83 height=55 src="http://oydt3ttm3.bkt.clouddn.com/{{ $attrs_goodsinfo['goods_pic'] }}"></a></div>
                           <div class="fl pc-wares-w">
                               <a href="{{ $attrs_goodsinfo['id'] }}">{{ $attrs_goodsinfo['goods_name'] }}</a>
                               <p class="clearfix">
                                   <span class="fl">颜色：{{ $attrs_goodsinfo['color'] }}</span>
                                   <span class="fr">品牌：{{ $attrs_goodsinfo['brand'] }}</span>
                               </p>
                           </div>
                           <div class="fl pc-wares-s">
                               <span class="reds" style="padding-left:30px">￥{{ $salePrice }}</span>
                               <span style="padding-left:30px">x1</span>
                               <span style="padding-left:30px">{{ $salePrice }}</span></div>
                       </div>
                       @endif

                   </div>
               </div>
           </div>
       </div>
       <form action="{{ route('createsaleorder') }}" method="post">
           {{ csrf_field() }}
       <div class="pc-space">
            <div class="pc-order-title clearfix"><h3 class="fl">留个言</h3></div>
            <div class="pc-border">
                <div class="pc-order-text clearfix">
                    <ul class=" clearfix">
                        <li class="clearfix fl">
                            <div class="fl pc-address pc-wares-l">
                                <input type="text" name="message" placeholder="给您的订单留个言(选填，不超过50字)" id="msg" style="height:30px;width:500px"/>
                                <input type="hidden" name="attr_id" value="{{ $attr_id }}" >
                                <span style="color:gray"> 本商城暂不支持电子发票</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

           <div class="clearfix">
               <div class="fr pc-list-t">
                   <ul>
                       <li><span><b>1</b> 件商品，总商品金额：</span> <em>￥{{ $salePrice }}</em></li>
                       <li><span>运费：</span> <em>￥{{ $payment }}</em></li>
                       <li><span>应付总额：</span> <em>￥{{ $totalPay }}</em></li>
                   </ul>
               </div>
           </div>
           <div class="pc-space-n"></div>
           <div class="clearfix">
               <div class="fr pc-space-j">
                   <spna>应付总额：<strong>￥{{ $totalPay }}</strong></spna>
                   <button class="pc-submit">提交订单</button>
               </div>
          </div>
    </form>
    </div>
</section>
<!-- 订单提交成功 End-->

@endsection
<!--- footer begin-->

<!-- footer End -->
@section('foot-js')

<script type="text/javascript">


</script>
@endsection
